<template>
    <div class="export-container">
      <el-form :model="form">
        <el-form-item>
          <el-checkbox v-model="allChecked" @change="handleCheckAllChange">全选</el-checkbox>
        </el-form-item>
        <el-form-item label="选项">
          <el-checkbox-group v-model="form.options" @change="handleOptionsChange">
            <el-checkbox label="进口日期"></el-checkbox>
            <el-checkbox label="申报日期"></el-checkbox>
            <el-checkbox label="报关单"></el-checkbox>
            <el-checkbox label="境内收货人"></el-checkbox>
            <el-checkbox label="境外收货人"></el-checkbox>
            <el-checkbox label="合同协议号"></el-checkbox>
            <el-checkbox label="提运单号"></el-checkbox>
            <el-checkbox label="货物存放地点"></el-checkbox>
            <el-checkbox label="消费使用单位"></el-checkbox>
            <el-checkbox label="贸易国(地区)"></el-checkbox>
            <el-checkbox label="件数"></el-checkbox>
            <el-checkbox label="申报单位"></el-checkbox>
            <el-checkbox label="自运口岸"></el-checkbox>
            <el-checkbox label="经停港"></el-checkbox>
            <el-checkbox label="途径国"></el-checkbox>
            <el-checkbox label="目的地口岸"></el-checkbox>
            <el-checkbox label="毛重(kg)"></el-checkbox>
            <el-checkbox label="净重(kg)"></el-checkbox>
            <el-checkbox label="费用(运费)"></el-checkbox>
            <el-checkbox label="费用(运费)币种"></el-checkbox>
            <el-checkbox label="运输方式"></el-checkbox>
            <el-checkbox label="运输工具名称及航次号"></el-checkbox>
            <el-checkbox label="报关总价"></el-checkbox>
            <el-checkbox label="报关币种"></el-checkbox>
            <el-checkbox label="增值税总税额"></el-checkbox>
            <el-checkbox label="关税总税额"></el-checkbox>
            <el-checkbox label="是否付税"></el-checkbox>
            <el-checkbox label="付税总金额"></el-checkbox>
            <el-checkbox label="付税总差额"></el-checkbox>
            <el-checkbox label="货物编号"></el-checkbox>
            <el-checkbox label="货物名称"></el-checkbox>
            <el-checkbox label="是否付汇"></el-checkbox>
            <el-checkbox label="付汇总金额"></el-checkbox>
            <el-checkbox label="付汇总差额"></el-checkbox>
            <el-checkbox label="货物编号"></el-checkbox>
            <el-checkbox label="货物名称"></el-checkbox>
            <el-checkbox label="数量"></el-checkbox>
            <el-checkbox label="单位"></el-checkbox>
            <el-checkbox label="规格"></el-checkbox>
            <el-checkbox label="单价"></el-checkbox>
            <el-checkbox label="总价"></el-checkbox>
            <el-checkbox label="完税价格"></el-checkbox>
            <el-checkbox label="增值税率(%)"></el-checkbox>
            <el-checkbox label="增值税金额"></el-checkbox>
            <el-checkbox label="关税率(%)"></el-checkbox>
            <el-checkbox label="关税金额"></el-checkbox>
            <el-checkbox label="货物付汇金额"></el-checkbox>
            <el-checkbox label="货物付汇差额"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import { ref, watch } from 'vue';
  
  export default {
    setup() {
      const form = ref({
        options: [],
      });
  
      const allOptions = [
        "进口日期", "申报日期", "报关单", "境内收货人", "境外收货人", "合同协议号", "提运单号", "货物存放地点", "消费使用单位", "贸易国(地区)", "件数", "申报单位", "自运口岸", "经停港", "途径国", "目的地口岸", "毛重(kg)", "净重(kg)", "费用(运费)", "费用(运费)币种", "运输方式", "运输工具名称及航次号", "报关总价", "报关币种", "增值税总税额", "关税总税额", "是否付税", "付税总金额", "付税总差额", "货物编号", "货物名称", "是否付汇", "付汇总金额", "付汇总差额", "货物编号", "货物名称", "数量", "单位", "规格", "单价", "总价", "完税价格", "增值税率(%)", "增值税金额", "关税率(%)", "关税金额", "货物付汇金额", "货物付汇差额"
      ];
  
      const allChecked = ref(false);
  
      const handleCheckAllChange = (val) => {
        form.value.options = val ? allOptions : [];
      };
  
      const handleOptionsChange = () => {
        allChecked.value = form.value.options.length === allOptions.length;
      };
  
      watch(form.value.options, handleOptionsChange);
  
      return {
        form,
        allChecked,
        handleCheckAllChange,
        handleOptionsChange,
      };
    },
  };
  </script>
  
  <style scoped>
  .export-container {
    padding: 20px;
  }
  </style>